<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品牌详情页分享</title>
     <link rel="stylesheet" href="https://ttresource.oss-cn-beijing.aliyuncs.com/handupload/video.css">
    <style type="text/css">
    body, html{font-family: PingFangSC-Regular, sans-serif;}
    	body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{ font-size:100%; }
        address, cite, dfn, em, var { font-style:normal; }
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
        small{ font-size:12px; }
        ul, ol { list-style:none; }
        a { text-decoration:none; }
        a:hover { text-decoration:underline; }
        sup { vertical-align:text-top; }
        sub{ vertical-align:text-bottom; }
        legend { color:#000; }
        fieldset, img { border:0; }
        button, input, select, textarea { font-size:100%; }
        table { border-collapse:collapse; border-spacing:0; }
        a:link{text-decoration:none; cursor:pointer; color:#2A2A2A;}  
         a:visited{text-decoration:overline; cursor:pointer; color:#2A2A2A;}  
         a:active{text-decoration:overline; cursor:pointer; color:#2A2A2A;}  
         a:hover{text-decoration:overline; cursor:pointer; color:#2A2A2A;} 
        .line{
            width: 100%;
            height: 10px;
            background: #f3f3f3;
        }
        .bor_no{
            border: none!important;
        }
        .red_color{
            color: #FF4954!important;
        }
        .BrandDetails{
            width: 100%;
            /*height: 100%;*/
            position: absolute;
            left: 0;
            top: 0;
            background: #F3F3F3;
        }
        .downheader{
            width: 100%;
            height: 60px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            position: fixed;
            z-index: 99;
        }
        .logo_img{
            width: 127px;
            height: 41px;
        }
        .logo_img img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .down_btn{
            width: 100px;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 4px;
            line-height: 37px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #000;
        }
        .down_bg_box{
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        .down_bg_box img{
            width: 100%;
            height: auto;
        }
        .BrandDetails_card_box{
            width: 100%;
            padding: 0 18px;
            box-sizing: border-box;
            position: absolute;
            top: 145px;
        }
        .BrandDetails_card{
            min-height: 94px;
            background: #fff;
            border-radius: 4px;
            padding: 0 18px;
            box-sizing: border-box;
            position: relative;
        }
        .BrandDetails_card_one{
            font-size: 16px;
            color: #2A2A2A;
            /*border-bottom: 1px solid #DFDFDF;*/
            font-weight: 500;
            line-height: 50px;
        }
        .BrandDetails_card_two{
            font-size: 14px;
            color: #2A2A2A;
            font-weight: 400;
            border-bottom: 1px solid #DFDFDF;
            padding-bottom: 13px;
        }
        .BrandDetails_card_three{
        	width: 100%;
             font-size: 14px;
            color: #6F757C;
            font-weight: 400;
            height: 70px;
            display: flex;
            align-items: center;
        	justify-content: space-between;
        }
        .BrandDetails_card_three_flex{
        	display: flex;
        	align-items: center;
        }
        .BrandDetails_card_three_one{
        	width: 36px;
        	height: 36px;
        	border-radius: 100%;
        	overflow: hidden;
        	margin-right: 10px;
        }
        .BrandDetails_card_three_one img{
        	width: 100%;
        	height: 100%;
        	display: block;
        }
        .BrandDetails_card_three_two{
        	font-size: 14px;
        	color: #2A2A2A;
        	font-weight: 400;B5B5B5
        }
        .BrandDetails_card_three_three{
        	font-size: 12px;
        	color: #B5B5B5;
        	font-weight: 400;
        }
        .BrandDetails_card_three_four{
		    width: 6px;
		    height: 10px;
		    margin-left: 10px;
		}
		.BrandDetails_card_three_four img{
		    width: 100%;
		    height: 100%;
		    display: block;
		}
		.number{
            display: flex;
            height: 72px;
            align-items: center;
            border-bottom: 1px solid #DFDFDF;
            border-top: 1px solid #DFDFDF;
        }
        .num1{
            width: 25%;
        }
        .nums{
            padding-left: 15px;
            width: 30%;
            border-left: 1px solid #d8d8d8;
            border-right: 1px solid #d8d8d8;
        }
        .num3{
            width: 45%;
            padding-left: 15px;
        }
        .amount{
            font-size: 18px;
            color: #2A2A2A;
            font-weight: 600;
        }
        .count{
            font-size: 10px;
            color: #6F757C;
            font-weight: 400;
        }
        .find_nav_box{
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #C3C3C3;
            font-weight: 500;
            margin-top: 58px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        .find_total{
            width: 32%;
            padding-left: 18px;
        }
        .find_nav{
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .find_nav div{
            /* width: 24%; */
            position: relative;
        }
        .find_nav_active{
            color: #2A2A2A;
        }
        .find_nav_active:after{
            content: "";
            position: absolute;
            border-bottom: 2px solid #2A2A2A;
            bottom: -16px;
            left: 50%;
            width: 12px;
            margin-left: -6px;
        }
        .Brand_head{
        	width: 75px;
        	height: 75px;
        	border-radius: 100%;
        	overflow: hidden;
        	position: absolute;
        	left: 50%;
        	top: -38px;;
        	margin-left: -38px;
            border: 2px solid #DFDFDF;
        }
        .Brand_head img{
        	width: 100%;
        	height: 100%;
        	display: block;
        }
        .flexs{
        	display: flex;
        	justify-content: space-between;
        	padding-top: 18px;
        	font-size: 20px;
        	color: #2A2A2A;
        	font-weight: 600;
        }
        .fensi{
        	font-size: 10px;
        	color: #6F757C;
        	font-weight: 400;
        }
        .shenmehao{
        	font-size: 14px;
        	color: #2A2A2A;
        	font-weight: 500;
        	position: relative;
        	text-align: center;
        }
        .shenmehao:after{
        	content: "";
        	width: 35%;
        	height: 1px;
        	background: #f0f0f0;
        	position: absolute;
        	top: 10px;
        	left: 0;
        } 
        .shenmehao:before{
        	content: "";
        	width: 35%;
        	height: 1px;
        	background: #f0f0f0;
        	position: absolute;
        	top: 10px;
        	right: 0;
        }
        .shenmehaos{
        	font-size: 12px;
        	color: #6F757C;
        	font-weight: 400;
        	position: relative;
        	text-align: center;
        }
        .shenmehaos:after{
        	content: "";
        	width: 35%;
        	height: 1px;
        	background: #f0f0f0;
        	position: absolute;
        	top: 10px;
        	left: 0;
        } 
        .shenmehaos:before{
        	content: "";
        	width: 35%;
        	height: 1px;
        	background: #f0f0f0;
        	position: absolute;
        	top: 10px;
        	right: 0;
        }
        .bus_list{
        	background: #fff;
        	padding: 18px;
        }
        .bus_item{
        	padding: 10px 0 12px 0;
        	border-bottom: 1px solid #DFDFDF;
        }
        .bus_item_flex{
        	display: flex;
        	justify-content: space-between;
        }
        .bus_item_flex>div:first-child{
        	width: 55%;
        }

        .bus_item_flex>div:nth-child(2){
        	width: 25%;
        }
        .bus_item_flex>div:nth-child(3){
        	width: 20%;
        }
        .bus_item_flex img{
        	width: 5px;
        	height: 7px;
        	margin-bottom: 3px;
        }
        .bus_item_c_one{
        	font-size: 13px;
        	color: #2A2A2A;
        	font-weight: 500;
        	padding-bottom: 3px;
        }
        .bus_item_c_two{
        	font-size: 13px;
        	color: #2A2A2A;
        	font-weight: 300;
        }
        .bus_item_c_three{
        	font-size: 13px;
            font-weight: 300;
            text-align: right;
        }
        .bus_item_c_four{
        	font-size: 10px;
        	color: #6F757C;
        	font-weight: 200;
        }
        .bus_item_c_four span{
        	border: 1px solid #CDCDCD;
        	padding: 0 3px;
        }
         .bus_item_c_five{
        	font-size: 10px;
        	font-weight: 200;
        	color: #6F757C;
        }
        .bus_item_c_six{
        	font-size: 10px;
        	font-weight: 200;
            color: #6F757C;
            text-align: right;
        }
        .bus_no{
        	width: 130px;
        	height: 76px;
        	position: absolute;
        	left: 50%;
        	top: 50%;
        	margin-left: -65px;
        	margin-top: 38px;
        }
        .bus_no img{
        	width: 100%;
        	height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.2);
            z-index: 99;
            display: none;
        }
        .msg_box{
            width: 80%;
            min-height: 130px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -40%;
            z-index: 999;
            background: #fff;
            border-radius: 10px;
            text-align: center;
        }
        .title{
             height: 40px;
             line-height: 40px;
        }
        .content{
            padding: 0 18px 50px 18px;
        }
        .okbtn{
            color: #007bfe;
            height: 40px;
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 40px;
            font-weight: bold;
            border-top: 1px solid #eee;
        }
        .tabBox{
        	background: #fff;
        }
        .tabBoxTwo_shenmehao{
        	padding-top: 15px;
        	font-size: 20px;
        	color: #2A2A2A;
        	font-weight: 400;
        	text-align: center;
        }
        .videoBg{
            margin: 18px;
        }
        .videoBgs {
            padding: 18px;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            /* overflow: hidden; */
        }
        .find_chazhuang_img {
            width: 100%;
            height: auto;
        }

        .find_chazhuang_img img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .find_chazhuang {
            box-sizing: border-box;
            overflow: hidden;
            margin-top: 20px;
        }
        .guanzhu{
            position: relative;
        }
        .guanzhu:after{
            content: "";
            position: absolute;
            left: -10px;
            top: 3px;
            width: 7px;
            height: 7px;
            background-image: url(./image/add.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
	<div class="BrandDetails">
        <div class="downheader">
            <div class="logo_img">
                <img src="./image/share_logo.png" alt="">
            </div>
            <a id="download"><div class="down_btn">立即下载</div></a>
        </div>
        <div class="down_bg_box">
            <img src="./image/dfbg.png">
        </div>
        <div class="BrandDetails_card_box">
            <div class="BrandDetails_card">
               <div class="Brand_head">
               	   <img class="Brand_head_img" src="./image/goodsImg.png">
               </div>
                <div class="flexs">
                	<div>
                		<div class="numbs">3729</div>
                		<div class="fensi">粉丝</div>
                	</div>
                	<div>
                		<a id="down"><div class="guanzhu">关注</div></a>
                		<div></div>
                	</div>
                </div>
                <div class="shenmehao">湾润号</div>
            </div>
        </div>
        <div class="find_nav_box">
            <div class="find_nav">
                <div class="find_nav_active">全部预售(<span class="product_count"></span>)</div>
                <div>品牌故事</div>
            </div>
        </div>
        <div class="tabBox">
        	<div class="tabBoxOne finds">
                <a id="downs">
                    <div class="bus_list">
                        <!-- <div class="bus_item">
                            <div class="bus_item_flex">
                                <div class="bus_item_c_one">mini湾</div>
                                <div class="bus_item_c_two">¥89.00</div>
                                <div class="bus_item_c_three red_color">0.09%&nbsp;<img src="./image/jiantouhong.png"></div>
                            </div>
                            <div class="bus_item_flex">
                                <div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
                                <div class="bus_item_c_five">历史平均</div>
                                <div class="bus_item_c_six">涨幅度</div>
                            </div>
                        </div>
                        <div class="bus_item">
                            <div class="bus_item_flex">
                                <div class="bus_item_c_one">mini湾</div>
                                <div class="bus_item_c_two">¥89.00</div>
                                <div class="bus_item_c_three green_color">0.09%&nbsp;<img src="./image/greendown.png"></div>
                            </div>
                            <div class="bus_item_flex">
                                <div class="bus_item_c_four"><span>用户持仓量: 9011</span></div>
                                <div class="bus_item_c_five">历史平均</div>
                                <div class="bus_item_c_six">涨幅度</div>
                            </div>
                        </div> -->
                    </div>
                </a>
        	</div>
		        	
        	<div class="tabBoxTwo finds" style="display: none;">
        		<div class="tabBoxTwo_shenmehao">湾润号</div>
        		<div class="shenmehaos">茶农茶庄</div>
        		<div class="dind2 finds">
                <div class="videoBg">
                    <video id="my-video" class="video-js videoBgs videoBgs1" controls preload="auto" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMkZ8908OI26Xnnsei6xpcJdMMR15Ozd7e_IBXNYzbp860vjdg"
                        data-setup="{}">{/*./images/vdbg.png*/}
                        <p className="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_self">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
                 <div class="find_chazhuang">
                    <div class="find_chazhuang_img">
                        <img src="" alt="">
                    </div>
                </div>
            </div>
        	</div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
<script type="text/javascript">
	 $('.find_nav div').click(function() {
            var i = $(this).index();//下标第一种写法
            $(this).addClass('find_nav_active').siblings().removeClass('find_nav_active');
            $('.tabBox .finds').eq(i).show().siblings().hide();
    });
    $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    var part = "";
    var id = $.getUrlParam('id');
    var host = $.getUrlParam('host');
    var protocol = $.getUrlParam('protocol');
    // 详情video str
    var render_video = function (data) {
        return '<source src=' + data.video_banner + ' type="video/mp4" />'
    }
    // 产品详情 str
    var renderDetails2 = function (data) {
        var part =
            '<div class="find_chazhuang">' + $.map(data.long_images, function (i, v) {
                return (
                    '<div class="find_chazhuang_img">' +
                    '<img src=' + i.img_url + ' alt="">' +
                    '</div>'
                )
            })
        '</div>';
        return part;
    }
    function getData(current) {
        $.ajax({
            type: 'GET',
            // url: 'http://api.tuntun.roc.ltd/product/brands/' + id,
            url: protocol + '://' + host +'/product/brands/' + id,
            contentType: 'application/json',
            withCredentials: true,
            dataType: 'json',
            success: function (data) {
            	if(!data.code) {
                    $(".numbs").html(data.attention_count);
                    $(".Brand_head_img").attr("src", data.logo);
                    $(".shenmehao").html(data.store);
                    $(".videoBgs1").append(render_video(data))
                    $(".dind2").append(renderDetails2(data));
                    $("#down").attr("href", data.download_link);
                    $("#download").attr("href", data.download_link);
                    $("#downs").attr("href", data.download_link);
                    
                    $("title").html(data.name);
            	}else{
            		 $(".mask").show();
                	$(".content").html(data.msg)
            	}
            },
            error: function(error) {
	            $(".mask").show();
	            $(".content").html("加载失败")
	            console.log(error)
	        }
        });
        $.ajax({
            type: 'GET',
            // url: 'http://api.tuntun.roc.ltd/product/brands/'+id+'/products?offset=-1&limit=-1',
            url: protocol + '://' + host +'/product/brands/'+id+'/products?offset=-1&limit=-1',
            contentType: 'application/json',
            withCredentials: true,
            dataType: 'json',
            async: false,
            success: function (data) {
                if(!data.code) {
                    $(".product_count").html(data.count);
                     data.items.forEach(function (i, v) {
                        var img = '', clsname = '';
                        if (i.up_down_percent * 1 > 0) {
                            img = './image/jiantouhong.png';
                            clsname = 'red_color';
                        } else if (i.up_down_percent * 1 < 0) {
                            img = './image/greendown.png';
                            clsname = 'green_color';
                        }else{
                            img = './image/jiantouhong.png';
                        }
                        part += 
                            '<div class="bus_item">'+
                                '<div class="bus_item_flex">'+
                                    '<div class="bus_item_c_one">'+i.name+'</div>'+
                                    '<div class="bus_item_c_two">¥'+i.avg_price+'</div>'+
                                    '<div class="bus_item_c_three '+ clsname +'">'+ i.up_down_percent +'&nbsp;<img src="'+img+'"></div>'+
                                '</div>'+
                                '<div class="bus_item_flex">'+
                                    '<div class="bus_item_c_four"><span>用户持仓量: '+i.keeping_count+'</span></div>'+
                                    '<div class="bus_item_c_five">历史平均</div>'+
                                    '<div class="bus_item_c_six">涨幅度</div>'+
                                '</div>'+
                            '</div>';
                        });
                    $(".bus_list").append(part)
                    
                }else{
                     $(".mask").show();
                    $(".content").html(data.msg)
                }
              
            },
             error: function(error) {
                    $(".mask").show();
                    $(".content").html("加载失败")
                    console.log(error)
                }
        })   
    }
     
    getData()
</script>
</html>










